<template>
  <!-- 所有的内容要被根节点包含起来-->
  <div>
    <!--搜索框-->
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="课程：">
        <el-select v-model="searchForm.courseId" placeholder="请选择课程" @change="selectCourseChange">
          <el-option :label="item.name" :value="item.id" v-for="item in courseList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问卷：">
        <el-select v-model="searchForm.paperId" placeholder="请选择问卷">
          <el-option :label="item.title" :value="item.id" v-for="item in paperList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getPaperAnalysis" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <!--图表-->
    <el-divider content-position="left"><el-tag>问卷总体情况</el-tag></el-divider>
    <div id="myChart" :style="{width: '100%'}"></div>
    <div id="myChart2" :style="{width: '100%', height: '100%'}">
      <div :id="'myChart2-' + index" v-for="(item, index) in analysisData">
      </div>
    </div>

    <!--表格-->
    <el-divider content-position="left"><el-tag>学生答题详情</el-tag></el-divider>
    <div>
      <el-table
          :data="paperAnswerData.answerDTOList"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
      >


        <el-table-column
            prop="studentNumber"
            label="学号"
            width="120">
        </el-table-column>

        <el-table-column
            prop="studentName"
            label="学生姓名"
            width="120">
        </el-table-column>

        <!-- 动态生成列 -->
        <el-table-column
            v-for="(item,index) in paperAnswerData.answerDTOList[0].answerList"
            :key="index"
            :label="item.content"
            align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.answerList[index].value }}</div>
          </template>
        </el-table-column>
        <!-- 动态生成列结束 -->

        <el-table-column
            prop="average"
            label="平均分"
            width="120">
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      searchForm: {
        courseName: '请选择课程',
        paperTitle: '请选择问卷'
      },
      courseList: [],
      paperList: [],
      // 得分情况图表数据源
      paperAnswerData: {
        title: "问卷1",
        answerCountVOList: [
          {
            "content": "问题1",
            "value1": 1,
            "value2": 0,
            "value3": 0,
            "value4": 0,
            "value5": 2
          }
        ],
        // 答题详情列表
        answerDTOList: [
          {
            studentNumber: "",
            studentName: "",
            answerList: [
              {
                content: "暂无",
                value: ''
              }
            ]
          }
        ]
      },
      analysisData:[],
      // 图表数据
      option: {
        title: {text: 'ECharts 入门示例'},
        tooltip: {//设置鼠标悬停提示框的位置。
        },
        legend: {},
        dataset: {
          source: [
            ['product', '1分', '2分', '3分', '4分', '5分'],
            // ['1分'],
            // ['2分'],
            // ['3分'],
            // ['4分'],
            // ['5分']
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      }
    }
  },
  mounted() {
    this.getCourseList()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      // console.log("this.PaperAnser.answerCountVOList")
      // console.log(this.PaperAnser.answerCountVOList)
      this.option.title.text = this.paperAnswerData.title
      let i = 1;
      for (const element of this.paperAnswerData.answerCountVOList) {
        // this.option.dataset.source[0].push(element.content)
        // this.option.dataset.source[1].push(element.value1)
        // this.option.dataset.source[2].push(element.value2)
        // this.option.dataset.source[3].push(element.value3)
        // this.option.dataset.source[4].push(element.value4)
        // this.option.dataset.source[5].push(element.value5)
        let q = [];
        q.push("问题" + i)
        this.option.dataset.source.push(q)
        console.log(this.option.dataset.source[i])
        this.option.dataset.source[i].push(element.value1)
        this.option.dataset.source[i].push(element.value2)
        this.option.dataset.source[i].push(element.value3)
        this.option.dataset.source[i].push(element.value4)
        this.option.dataset.source[i].push(element.value5)
        i++
      }
      console.log(this.option.dataset.source)
      // console.log("this.option")
      // console.log(this.option)
      myChart.setOption(this.option);
    },
    drawLine2() {
      let i = 0;
      for (const element of this.analysisData) {
        // vue获取动态加载的标签
        this.$nextTick(function() {
          document.getElementById('myChart2-' + i).setAttribute('style', 'height: 400px !important')
          let myChart = echarts.init(document.getElementById('myChart2-' + i))
          let option = {
            title: {text: element.gradeName},
            tooltip: {//设置鼠标悬停提示框的位置。
            },
            legend: {},
            dataset: {
              source: [
                ['product', '1分', '2分', '3分', '4分', '5分'],
              ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
          }

          let j = 1
          // console.log(element.answerCountVOList)
          for (const element2 of element.answerCountVOList) {
            let q = [];
            q.push("问题" + j)
            option.dataset.source.push(q)
            // console.log(option.dataset.source[j])
            option.dataset.source[j].push(element2.value1)
            option.dataset.source[j].push(element2.value2)
            option.dataset.source[j].push(element2.value3)
            option.dataset.source[j].push(element2.value4)
            option.dataset.source[j].push(element2.value5)
            j++
          }
          // console.log(option)
          myChart.setOption(option);
          i++
        })


      }


    },
    drawLine3() {
      this.$nextTick(function() {

        let option = {
        title: {text: '课程目标达成度一览表'},
        tooltip: {//设置鼠标悬停提示框的位置。
        },
        legend: {},
        dataset: {
          source: [
            ['product'],
          //   ['product', '2017级', '2018级'],
          //   ['问题1', 0.2, 0.68],
          //   ['问题2', 0.55, 0.68],
          //   ['问题3', 0.77, 0.78],
          //   ['问题4', 0.76, 0.48],
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: []
      }

      document.getElementById('myChart').setAttribute('style', 'height: 400px !important')
      let myChart = echarts.init(document.getElementById('myChart'))

      let i = 0;
      for (const element of this.analysisData) {
        option.dataset.source[0].push(element.gradeName)
        option.series.push({ type: 'bar' })
        // vue获取动态加载的标签
          let j = 1
          for (const element2 of element.answerCountVOList) {
            if (i == 0) {
              let q = [];
              q.push("问题" + j)
              option.dataset.source.push(q)
            }
            console.log(option.dataset.source)
            option.dataset.source[j].push(element2.reach)
            // console.log(element2.reach)
            // console.log(option.dataset.source)
            j++
          }
          i++
      }
      console.log("图表3")
      console.log(option)
      myChart.setOption(option);
    })

},
    selectCourseChange(event){
      console.log(event)
      this.getPaperList();
    },
    getCourseList() {
      this.$axios.get("/course").then(res => {
        this.courseList = res.data.data.records
      })
    },
    getPaperList() {
      this.$axios.get("/paper", {
        params: {
          courseId: this.searchForm.courseId,
        }
      }).then(res => {
        this.paperList = res.data.data.records
        console.log(this.paperList)
      })
    },
    getPaperAnalysis() {
      // console.log(this.searchForm.paperId)
      this.$axios.get("/answer/" + this.searchForm.paperId).then(res => {
        // console.log(res.data.data)
        this.paperAnswerData = res.data.data
        // this.drawLine()
        // this.drawLine2()
        // console.log(this.PaperAnser)
      })

      this.$axios.get("/answer/analysis/" + this.searchForm.paperId).then(res => {
        // console.log(res.data.data)
        this.analysisData = res.data.data
        // this.drawLine()
        this.drawLine2()
        this.drawLine3()

        // console.log(this.PaperAnser)
      })
    },

  }
}
</script>